<!--
 * @Author: 谢小康 2170673706@qq.com
 * @Date: 2024-01-07 19:53:21
 * @LastEditors: 谢小康 2170673706@qq.com
 * @LastEditTime: 2024-02-01 10:07:56
 * @FilePath: \My-bolg\My_Blog\src\components\SkeletonItem\articleskltonl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
     <div class="moble" v-if="ismoble">
        <skeleton-item variant="image" width="40%" height="100%" />
        <div class="moble-text">
            <skeleton-item variant="text" left="25px" width="40%" height="20px" top="8px" />
            <skeleton-item variant="text" left="25px" width="70%" height="40px" top="8px" />
            <skeleton-item variant="text" left="25px" width="70%" height="30px" top="8px" />
        </div>
    </div>
    <div class="pc" v-else>
        <skeleton-item variant="image" width="100%" height="50%" />
        <div class="pc-text">
            <skeleton-item variant="text" left="25px" width="40%" height="20px" top="8px" />
            <skeleton-item variant="text" left="15px" width="80%" height="15px" top="8px" />
            <skeleton-item variant="text" width="95%" height="30px" top="8px" />
        </div>
    </div>
   
</template>

<script setup>
import { watch } from "vue";
import skeletonItem from "./skeletonItem.vue"
import {MobleStore} from "@/stores/mobleOrPc.js";
let mobleOrPc = MobleStore();
let ismoble = mobleOrPc.ismoble;
watch(()=>mobleOrPc.ismoble,(newvl)=>{
    ismoble = newvl;
})
</script>

<style lang="scss" scoped>
.pc {
    margin: 10px 0;
    height: 200px;
    border-radius: 15px;
    @include userTheme{
        background-color: getThemeValue("articleItemColor");
    }
    
}
.moble{
    display: flex;
    border-radius: 15px;
    margin: 10px 0;
    height: 200px;
    @include userTheme{
        background-color: getThemeValue("articleItemColor");
    }
}
.pc-text {
    height: 50%;
    width: 100%;
}
.moble-text{
    height: 100%;
    width: 60%;
}
</style>